<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="content"></div>
    <template id="tem1">
        <div>
            <p>{{el}}</p>
            <p>{{template}}</p>
            <p>{{data}}</p>
            <p>{{beforeCareate}}</p>
            <p>{{created}}</p>
            <p>{{beforeMount}}</p>
            <p>{{methods}}</p>
            <p>{{computed}}</p>
            <p>{{watch}}</p>
            <p></p>
        </div>
    </template>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm =new Vue({
            el:'#content',//挂载视图
            template:'#tem1',
            data:function(){
                return{
                    el:'1、el:挂载视图——理解程度：理解',
                    template:'2、template：模板——理解程度：理解',
                    data:'3、data：内容/数据——理解程度：理解',
                    beforeCareate:'4、beforeCareate:new()前——理解程度：理解',
                    created:'5、created:new()后——理解程度：理解',
                    beforeMount:'6、beforeMount：是否挂载模板前——理解程度：理解',
                    mounted:'7、mounted：是否挂载模板后——理解程度：理解',
                    methods:'8、methods：方法属性-不会缓存，调用方法加括号（）——理解程度：理解',
                    computed:'9、computed：计算属性-会缓存，调用方法不需要括号——理解程度：理解',
                    watch:'10、watch：监视属性，理解属性：部分理解'
                } 
            },
            // new前
            beforeCreate:function(){
                console.log('beforeCareate')
            },
            // new后
            created:function(){
                console.log('careater')
            },
            // 是否挂载模板前
            beforeMount:function(){
                console.log('beforeMount')
            },
            // 是否挂载模板后
            mounted:function(){
                console.log('mounted')
            },
            beforeUpdate:function(){
                console.log('beforeUpdate')
            },
            updated:function(){
                console.log('Update')
            },
            beforeDestory:function(){
                console.log('beforeDestory')
            },
            destory:function(){
                console.log('Destory')
            },
            // 方法属性
            methods:{
                gettime:function(){
                    return new Date();
                },
                say:function(){
                    console.log('八百里分麾下炙，五十弦翻塞外声')
                }
            },
            // 计算属性
            computed:{
                newtime:function(){
                    return new Date();
                }
            }

        })
    </script>
</body>
</html>